<template>
    <div class="wrap">
        <Tabs type="card">
            <TabPane v-for="tab in tabs" :key="tab.key" :label="tab.label">
                <div class="list">
                    <div v-for="item in tab.list" class="item"><a :href="item.url" target="_blank">{{item.title}}</a>
                    </div>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    export default {
        name: "navigation",
        data() {
            return {
                tabs: [
                    {
                        key: "tab-1",
                        label: "全国导航",
                        list: [
                            {
                                title: "公安部",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "北京市",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "天津市",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "内蒙古",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "河北省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "山西省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "辽宁省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "黑龙江",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "上海市",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "江苏省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "浙江省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "安徽省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "福建省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "江西省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "山东省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "河南省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "湖北省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "湖南省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "广东省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "广西省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "海南省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "重庆市",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "四川省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "贵州省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "云南省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "西藏",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "陕西省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "甘肃省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "青海省",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "宁夏",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "新疆",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "新疆建设兵团",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "吉林省",
                                url: "http://www.baidu.com"
                            }
                        ]
                    },
                    {
                        key: "tab-2",
                        label: "区内导航",
                        list: [
                            {
                                title: "呼和浩特",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "包头",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "鄂尔多斯",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "赤峰",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "通辽",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "呼伦贝尔",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "锡林郭勒",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "巴彦淖尔",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "乌兰察布",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "乌海",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "阿拉善",
                                url: "http://www.baidu.com"
                            }
                        ]
                    },
                    {
                        key: "tab-3",
                        label: "本市导航",
                        list: [
                            {
                                title: "赛罕区",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "新城区",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "玉泉区",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "土默特左旗",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "托克托县",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "清水河",
                                url: "http://www.baidu.com"
                            },
                            {
                                title: "和林",
                                url: "http://www.baidu.com"
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .wrap {
        width: 100%;
        background-color: #fff;
        padding: 10px;
    }

    .wrap .list {
        display: flex;
        flex-wrap: wrap;
    }

    .wrap .list .item {
        padding: 10px;
    }
</style>